<template>
  <span v-if="data" class="design-status" :style="styles">{{ text }}</span>
</template>

<script setup lang="ts" name="designStatus">
import { computed } from 'vue';
import { DesignWork } from '/@/models';
import dayjs from 'dayjs';

interface IProps {
  data: DesignWork;
}

const props = defineProps<IProps>();

const text = computed(() => {
  const { complete_date, end_date, real_start_date } = props.data || {};
  if (complete_date) {
    if (dayjs(complete_date).isAfter(end_date)) {
      return '超时完成';
    }
    return '正常完成';
  }

  if (real_start_date) {
    return '设计中';
  }

  return '未开始';
});

const colors = {
  未开始: '#999',
  设计中: '#165DFF',
  已完成: '#1D2129',
  超时完成: '#fa0000',
  正常完成: '#2FC207',
};

const styles = computed(() => {
  const { real_start_date, start_date } = props.data;

  if (!real_start_date && dayjs().isAfter(start_date)) {
    return { color: '#fa0000' };
  }

  return {
    color: colors[text.value],
  };
});
</script>
